<template>
  <div class="bottom-bar">
    <div class="checked-all">
      <check-button :is-checked="isSelectAll" @click.native="chickSelectAll" class="checked-all-button"></check-button>
      <span>全选</span>
    </div>
    <div class="total-price">合计：<span>{{ totalPrice }}</span></div>
    <div class="to-settlement" @click="toSettlement">去结算({{ checkedLength }})</div>
  </div>
</template>

<script>
import CheckButton from "@/components/content/checkButton/CheckButton";

export default {
  name: "CartBottomNav",
  components: {CheckButton},
  computed: {
    //总价格
    totalPrice() {
      return "￥" + this.$store.getters.getCartList.filter(item => {
        return item.isChecked;
      }).reduce((preValue, item) => {
        return item.price * item.count + preValue;
      }, 0)
    },
    //选中的商品个数
    checkedLength() {
      return this.$store.getters.getCartList.filter(item => item.isChecked).length;
    },
    isSelectAll() {
      //如果购物车没有商品，默认全选不选中
      if (this.$store.getters.getCartLength === 0) return false;
      //只要有一个不选中，全选按钮就不选中
      //return !(this.$store.getters.getCartList.filter(item => item.isChecked===false).length);
      return !(this.$store.getters.getCartList.find(item => item.isChecked === false))
    }
  },
  methods: {
    chickSelectAll() {
      //方法一
      /*if (this.isSelectAll) {
        this.$store.getters.getCartList.forEach(item => item.isChecked = false);
      }else {
        this.$store.getters.getCartList.forEach(item => item.isChecked = true);
      }*/
      //方法二
      const isSelectAll = this.isSelectAll;
      this.$store.getters.getCartList.forEach(item => item.isChecked = !isSelectAll);
    },
    //去结算
    toSettlement() {
      if (this.checkedLength !== 0) {

        this.$toast.msg("去结算");
      } else {
        if (this.$store.getters.getCartLength === 0) {
          this.$toast.msg("购物车为空，请先添加商品至购物车!");
        } else {
          this.$toast.msg("请选择结算的商品!");

        }
      }
    }
  }
}
</script>

<style scoped>
.bottom-bar {
  position: relative;
  display: flex;
  height: 40px;
  line-height: 40px;
  background-color: #fce1e4;
}

.checked-all {
  display: flex;
  align-items: center;
  margin-left: 10px;
  width: 66px;
}

.checked-all-button {
  width: 20px;
  height: 20px;
  line-height: 22px;
  margin-right: 4px;
}

.total-price {
  margin-left: 20px;
  flex: 1;
  color: #d00000;
}

.total-price span {
  font-weight: 600;
}

.to-settlement {
  width: 88px;
  background-color: #cd3636;
  text-align: center;
  color: #ffffff;
}
</style>
